<template>
    <div class="common-layout">
        <el-container class="home-container">
            <!--头部区域-->
            <el-header class="home-header">
                <div>
                    <el-icon style="margin-left: 10px;">
                        <MoonNight />
                    </el-icon>
                    <span>
                        东软颐养中心
                    </span>
                </div>
                <div>
                    <el-dropdown class="el-dropdown-link" @command="handleCommand">
                        <span>
                            <el-icon :size="30">
                                <Avatar />
                            </el-icon>
                            <el-icon>
                                <arrow-down class="el-icon--right" />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="/administerhome/personalcenter">
                                    个人中心
                                </el-dropdown-item>
                                <el-dropdown-item command="/login">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <span>管理员</span>
                </div>
            </el-header>
            <el-container>
                <el-aside class="home-aside">
                    <el-menu default-active="/administerhome/systemhomepage" class="el-menu-vertical-demo" router
                        @open="" @close="">
                        <el-menu-item index="/administerhome/systemhomepage">
                            <el-icon>
                                <SwitchButton />
                            </el-icon>
                            <span>系统首页</span>
                        </el-menu-item>
                        <el-sub-menu index="/administerhome/user">
                            <template #title>
                                <el-icon>
                                    <User />
                                </el-icon>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/administerhome/user/nursing">护理人员</el-menu-item>
                                <el-menu-item index="/administerhome/user/normal">普通用户</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-menu-item index="/administerhome/notice">
                            <el-icon>
                                <Bell />
                            </el-icon>
                            <span>公告管理</span>
                        </el-menu-item>
                        <el-menu-item index="/administerhome/bed">
                            <el-icon>
                                <House />
                            </el-icon>
                            <span>床位管理</span>
                        </el-menu-item>
                        <el-menu-item index="/administerhome/nursingrelationshipmanagement">
                            <el-icon>
                                <FirstAidKit />
                            </el-icon>
                            <span>看护关系管理</span>
                        </el-menu-item>
                        <el-sub-menu index="/administerhome/activity">
                            <template #title>
                                <el-icon>
                                    <View />
                                </el-icon>
                                <span>活动审批</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/administerhome/activity/checkinactivity">入住审批</el-menu-item>
                                <el-menu-item index="/administerhome/activity/moveoutactivity">迁出审批</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main class="home-main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useStore } from "vuex";

const router = useRouter();
const store = useStore();

const handleCommand = (command) => {
    if (command == '/login') {
        store.commit("clearAccount");
    }
    router.push(command);
};
</script>

<style lang="less" scoped>
.home-container {
    height: 100vh;
}

.home-header {

    background-color: #578BBA;
    display: flex;
    justify-content: space-between;
    padding-left: 0%;
    align-items: center;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 3px;
    font-size: 30px;
    font-weight: bold;

    >div {
        display: flex;
        align-items: center;

        span {
            margin-left: 15px;
        }

        img {
            width: 50px;
            height: 50px;
            margin-left: 20px;
        }

    }
}

.home-aside {
    width: 250px;
}

.home-main {
    background-color: #E9E9E9;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-dropdown-link {
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
}
</style>